<template>
  <div class="relative">
    <div :id="id" class="stem" :class="{ editor_dark: props.dark }" />
    <div
      v-if="isOperator"
      class="operator absolute right-2 top-2"
      :style="`z-index:${props.zIndex + 1}`"
    >
      <el-button size="small">清除视频</el-button>
      <el-button size="small">添加视频</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import E from "wangeditor";
import { cloneDeep } from "@pureadmin/utils";
import { formatHtml, strReplace } from "@/utils/exam";
import { onUnmounted } from "vue";
defineOptions({
  name: "editor"
});
interface Props {
  id: string;
  modelValue?: string | null;
  height?: number;
  placeholder?: string;
  dark?: boolean;
  value?: string | null;
  zIndex?: number;
  isDisabled?: boolean;
  isOperator?: boolean;
}
const emits = defineEmits(["update:modelValue"]);
const props = withDefaults(defineProps<Props>(), {
  height: 180,
  placeholder: "请输入题目描述",
  dark: true,
  value: null,
  isDisabled: false,
  isOperator: false
});
onMounted(() => {
  initEditor();
});
onUnmounted(() => {
  editor?.destroy();
});
// editor默认配置
const editorConfig = {
  // 关闭粘贴样式的过滤
  pasteFilterStyle: false,
  menus: [
    "fontName",
    "fontSize",
    "lineHeight",
    "foreColor",
    "bold",
    "link",
    "italic",
    "underline",
    "backColor",
    "undo",
    "image",
    "justify",
    "code"
  ],
  uploadImgMaxLength: 1,
  withCredentials: true,
  uploadFileName: "file",
  // 上传图片的类型
  uploadImgAccept: ["jpg", "jpeg"],
  // 隐藏上传网络图片tab
  showLinkImg: false,
  zIndex: props.zIndex || 1,
  // 取消编辑器自动获取焦点
  focus: false,
  // 配置全屏功能按钮是否展示
  showFullScreen: true
};
let editor: E | null = null;
const initEditor = () => {
  editor = new E(`#${props.id}`);
  // 配置菜单栏，删减菜单，调整顺序
  Object.assign(editor.config, cloneDeep(editorConfig));
  // 字体大小
  editor.config.fontSizes = {
    "x-small": { name: "12px", value: "1" },
    small: { name: "14px", value: "2" },
    normal: { name: "16px", value: "3" },
    large: { name: "18px", value: "4" },
    "x-large": { name: "24px", value: "5" },
    "xx-large": { name: "32px", value: "6" },
    "xxx-large": { name: "48px", value: "7" }
  };
  // 设置编辑区域高度为 100px
  editor.config.height = props.height;
  editor.config.placeholder = props.placeholder;
  editor.create();
  editroSetContent();
  editorUploadImg();
  editorUploadVideo();
  // 是否禁用
  props.isDisabled && editor.disable();
};
// 设置html
const editroSetContent = () => {
  // 设置html内容
  editor.txt.html(
    props.value === null
      ? strReplace(props.modelValue)
      : strReplace(props.value)
  );
  editor.config.onchange = (newHtml: string) => {
    emits("update:modelValue", formatHtml(newHtml));
  };
};
// 上传图片
const editorUploadImg = () => {
  editor.config.customUploadImg = async (
    resultFiles: File[],
    insertImgFn: Function
  ) => {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    // 上传base64
    if (resultFiles[0].size >= 100 * 1024) {
      ElMessage.error("图片最大为100KB");
      return;
    }
    const reader = new FileReader();
    // 设置文件加载完成后的回调函数
    reader.onload = function (loadEvent) {
      // 从 FileReader 中获取 Base64 编码的文件内容
      const base64String = loadEvent.target.result;
      insertImgFn(base64String);
    };
    reader.readAsDataURL(resultFiles[0]);
  };
};
// 上传视频
const editorUploadVideo = () => {
  editor.config.customUploadVideo = async (
    resultFiles: File[],
    insertVideoFn: Function
  ) => {};
};
watch(
  () => props.value,
  () => {
    editor?.txt.html(strReplace(props.value!));
  }
);
const setHtml = (str: string) => {
  editor?.txt.html(strReplace(str));
};
defineExpose({
  setHtml
});
</script>

<style lang="scss" scoped>
.stem {
  width: 100%;

  :deep(.w-e-menu) {
    font-size: 12px !important;
  }

  :deep(.w-e-droplist) {
    height: 150px !important;
    overflow: auto !important;
  }

  :deep(.w-e-menu-tooltip) {
    font-size: 12px !important;
  }

  :deep(.w-e-text-container) {
    background: #f6f7fa !important;
  }
}

.editor_dark {
  :deep(.w-e-text-container) {
    color: #fff;
    background: #4c4c4c !important;
    border: 1px solid #4c4c4c !important;
  }
}
</style>
